<template>
    <div>
        <h1>大头儿子</h1>
        <h3>{{money}}</h3>
        <h3>{{list}}</h3>
        <ul>
            <li v-for="(item,index) in list" :key="index">
                {{item.name}}{{item.age}}
            </li>
        </ul>
        <button @click="btn">测试props传递过来的数据是否可以改动</button>
    </div>
</template>

<script>
export default {
    name: '',
    // props父传子
    // props的格式
    // ①props:["money","list"]props只指定了属性名 属性名以字符串的格式放到数组当中
    // props: ["money", "list"],
    // ②指定了传递过来的值的属性名及类型
    // props:{
    //     money:{
    //         type:String,
    //     },
    //     list:{
    //         type:Array,
    //     }
    // },
    // ③ // required:true, 要求属性必须传递 不传递就会报错
    // 不要修改props中的值 如果要改动 请在父元素中进行更改（初始值的值在哪里就去哪里更改）
    // 当改动了props中的值后 基本数据类型会报错引用数据类型不会报错 但是这种做法违背组件之间传值的单项数据流的概念 不建议这种方式
    props:{
        money:{
            type:String,
            // required:true, 要求属性必须传递 不传递就会报错
        },
        list:{
            type:Array,
        }
    },
    data() {
        return {
        };
    },
    components: {
    },
    methods:{
        btn(){
            console.log(this.money);
            // this.money = '200W'
            console.log(this.list);
            this.list[0].age = 25;
        }
    }
}
/*
$emit自定义事件（子传父）

绑定事件
btn.click = function(){
    console.log('这是一个点击事件')
}
触发事件
用户在浏览器
*/
</script>

<style lang="less" scoped>

</style>